<template>
  <div class="side-bar" v-if="sideDatas.length">
    <!-- 侧边栏 -->
    <div class="menu">
      <van-sidebar v-model="currentSideActive" @change="onChange" class="van-sidebar">
        <template v-for="(item, index) in sideDatas" :key="index">
          <van-sidebar-item
            :title="item.label"
            class="menu-item"
            :class="{ menuActive: currentSideActive === index }"
          />
        </template>
      </van-sidebar>
    </div>
    <!-- 一级列表 -->
    <div class="content">
      <template
        v-if="sideDatas[currentSideActive].items"
        v-for="(item, index) in sideDatas[currentSideActive].items"
      >
        <div
          class="content-item"
          @click="ContentItemClick(index)"
          :class="{ active: isActive === index }"
        >
          <div class="items-label">{{ item.label }}</div>
          <span v-if="item.percentageUser" class="items-percentageUser">{{
            item.percentageUser
          }}</span>
        </div>
      </template>

      <!-- 二级列表 -->
      <div class="side-panel" v-if="getSubSide.length">
        <div class="side-panel-bar">
          <van-sidebar
            v-model="currentSubSideActive"
            @change="twoChange"
            class="side-panel-sidebar"
          >
            <template v-for="(item, index) in sideDatas[currentSideActive].subGroups" :key="index">
              <van-sidebar-item
                :title="item.label"
                class="side-panel-item"
                :class="{ menuActive: sidePaneItem === index }"
                @click="sidePaneItemClick(index)"
              />
            </template>
          </van-sidebar>
        </div>

        <div class="side-panel-content">
          <template v-for="(item, index) in getSubSideItems" :key="index">
            <div
              class="side-content-item"
              @click="ContentItemClick(index)"
              :class="{ active: isActive === index }"
            >
              <div class="side-content-item-text">
                {{ item.label }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch, computed, defineEmits } from 'vue'

  const props = defineProps({
    subGroups: {
      type: Array,
      default: () => []
    }
  })

  // watch(
  //   () => props.subGroups,
  //   (newValue, oldValue) => {
  //     sideDatas.value = newValue
  //   },
  //   {
  //     immediate: true
  //   }
  // )

  // const sideDatas = ref([])

  const sideDatas = computed(() => {
    return props.subGroups
  })
  const currentSideActive = ref(0)
  const currentSubSideActive = ref(0)

  const onChange = (index) => {
    console.log(index)
  }
  const twoChange = (index) => {
    console.log(index)
  }
  const isActive = ref()
  const ContentItemClick = (index) => {
    isActive.value = index
  }
  const sidePaneItem = ref()
  const sidePaneItemClick = (index) => {
    sidePaneItem.value = index
  }

  watch(
    () => currentSideActive.value,
    (newValue, oldValue) => {
      console.log('新值' + newValue, '旧值' + oldValue)
    },
    {
      immediate: true
    }
  )
  // console.log(props.subGroups[5].subGroups[0].items[0].label);

  const getSubSideItems = computed(() => {
    let subMenus = sideDatas.value[currentSideActive.value].subGroups || []
    let result = []
    if (subMenus.length) {
      result = subMenus[currentSubSideActive.value] || {}
    }
    result = result.items || []
    return result
  })

  const getSubSide = computed(() => {
    let subMenus = sideDatas.value[currentSideActive.value].subGroups || []
    return subMenus
  })
</script>

<style lang="less" scoped>
  @popupHeight: 500px;
  .side-bar :deep(.van-sidebar) {
    height: calc(@popupHeight - 60px);
  }
  .side-bar {
    display: flex;

    .menu {
      display: flex;
      .van-sidebar {
        --van-sidebar-width: 112px;
        .menu-item {
          font-size: 14px;
          height: 55px;
          padding-left: 20px;
          flex: 1;
        }
      }
    }
    .content {
      width: 100%;
      flex: 1;
      overflow-y: auto;
      height: calc(@popupHeight - 60px);
      .content-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 55px;
        padding: 0 20px 0 20px;
        margin-right: 20px;
        font-size: 14px;
        .items-label {
          font-size: 14px;
        }
        .items-percentageUser {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .side-panel {
    display: flex;

    .side-panel-bar {
      .side-panel-sidebar {
        --van-sidebar-width: 112px;

        .side-panel-item {
          height: 55px;
        }
      }
    }
    .side-panel-content {
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      height: calc(@popupHeight - 60px);
      .side-content-item {
        height: 55px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        .side-content-item-text {
          font-size: 14px;
        }
      }
    }
  }

  .active {
    background-color: #fff7f1;
    color: #ff9645;
  }
  .menuActive {
    color: #ff9645;
  }
</style>
